<template>
  <div>
    <button @click="startCountdown" :disabled="counting">
      {{ counting ? `${count} 秒后重新发送` : "发送验证码" }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counting: false,
      count: 60,
      timer: null,
    };
  },
  methods: {
    startCountdown() {
      if (!this.counting) {
        this.counting = true;
        this.timer = setInterval(() => {
          if (this.count > 1) {
            this.count--;
          } else {
            this.stopCountdown();
          }
        }, 1000);
      }
    },
    stopCountdown() {
      if (this.timer) {
        clearInterval(this.timer);
        this.counting = false;
        this.count = 60;
      }
    },
  },
};
</script>
